<template>
  <div class="editTaskFlowDialog">
    <el-dialog :title="'业务流程任务配置>修改 '" :visible.sync="dialogVisible" width="750px" :append-to-body="true" :close-on-click-modal="false">
      <div class="dialogWrap">
        <el-form ref="form" :rules="rules" :model="flowTaskConf">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label-position="left" label="业务类型" label-width="130px" prop="busiTypeCode">
                <el-select v-model="flowTaskConf.busiTypeCode">
                  <el-option v-for="item in busiTypeCodes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务环节" prop="taskName">
                <el-select v-model="flowTaskConf.taskName">
                  <el-option v-for="item in busiTaskCodes" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label-width="130px" label-position="left" label="正常办理周期（天）" prop="normalDay">
                <el-input placeholder="请输入正常办理周期（天）" v-model="normalDay"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="120px" label="预警周期（天）" prop="warnDay">
                <el-input placeholder="请输入预警周期（天）" v-model="warnDay"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <br />
                <el-input type="textarea" v-model="flowTaskConf.remark" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <br />
      </div>
      <el-row :span="12" style="text-align: center">
        <el-button type="primary" v-throttle="[updateConfig]">确认修改</el-button>&nbsp;&nbsp;
        <el-button type="default" @click="returns()">返回</el-button>
      </el-row>
      <br />
    </el-dialog>
  </div>
</template>

<script>
import dbl from '@/utils/dbl'
import flowConfiguration from './flow-configuration'
import axios from 'axios'

export default {
  name: "flow-Updateconfig",
  data () {
    return {
      dialogVisible: false,
      flowTaskConf: {
        busiTypeCode: '', // 业务类型
        taskName: '', // 业务环节
        normalDay: '', // 正常
        warnDay: '', // 预警
        remark: '',// 备注
        procDefId: '',
      },
      normalDay: '', // 正常
      warnDay: '', // 预警
      busiTypeCodes: [],
      busiTaskCodes: [],
      rules: {
        busiTypeCode: { required: true, message: '请选择业务类型', trigger: 'blur' },
        taskName: { required: true, message: '请选择业务环节', trigger: 'blur' },
        normalDay: [
          { required: true, message: '只能输入小于10的数字', trigger: 'blur' },
          { validator: isNum, trigger: 'blur' }
        ],
        warnDay: [{ required: true, message: '只能输入小于10的数字', trigger: 'blur' },
        { validator: isNum, trigger: 'blur' }

        ],
      },
    }
  },
  methods: {
    show (data) {
      this.dialogVisible = true;
      this.flowTaskConf = data;
      this.busiTypeCodes = utils.getDict('busi_type_code');
      this.busiTaskCodes = utils.getDict('busi_task_code');
      this.normalDay = data.normalDay;
      this.warnDay = data.warnDay;
    },
    updateConfig () {  // 新增
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '数据处理中'
          });
          var thta = this
          const config = {
            headers: { 'Content-Type': 'application/json' }
          }
          axios.post("/api/flowTaskConf", this.flowTaskConf, config).then(response => {
            this.$message.success('修改成功');
            thta.$emit('flowTaskConf', thta.flowTaskConf.procDefId);
            loading.close();
            thta.returns()
          }).catch(e => {
            loading.close();
            this.$message.error('修改失败');
            thta.$emit('flowTaskConf', thta.flowTaskConf.procDefId);
          })
        }
      })
    },
    returns () {
      this.flowTaskConf = {
        taskConfId: '',
        busiTypeCode: '', // 业务类型
        taskName: '', // 业务环节
        normalDay: '', // 正常
        warnDay: '', // 预警
        remark: '',// 备注
        procDefId: '',
      };
      this.dialogVisible = false
    },
    isNumber: function (value) {
      return (/^\-?[0-9]+$/).test(value + '');
    }
  },
  watch: {
    normalDay: function (event) {
      if (this.isNumber(event)) {
        if (event > 10) event = 10;
        this.normalDay = event;
        this.flowTaskConf.normalDay = event;
      } else {
        this.normalDay = "";
        this.flowTaskConf.normalDay = ''
      }
    },
    warnDay: function (event) {
      if (this.isNumber(event)) {
        if (event > 10) event = 10;
        this.warnDay = event;
        this.flowTaskConf.warnDay = event;
      } else {
        this.warnDay = "";
        this.flowTaskConf.warnDay = ''
      }
    }
  },
}
const isNum = (rule, value, callback) => {
  const age = /^[0-9]*$/;
  if (!age.test(value)) {
    callback(new Error('只能为数字'))
  } else {
    callback()
  }
}
</script>

<style scoped lang='scss'>
@include formWrap(4);

/deep/ .el-form-item__label {
  font-size: 12px;
}
</style>

